<template>

  <div class="bodyParent ">
    <div class="content-body">

      <span class="font18" style="line-height: 1">配置账户</span>
      <hr style="border: 1px solid #E9E9E9;background-color:#E9E9E9 ">

      <el-col class="table-conter">
        <el-row>
          <el-col>
            <span class="font18">管理员列表</span>
            <el-button
              size="medium"
              type="primary"
              class="font14  add_admin_btn"
              style="float: right"
              @click="addAdmin"
            >
              <span>添加管理员</span>

            </el-button>
          </el-col>

        </el-row>

        <el-row class="content_table" id="tablescontent">

          <el-table
            :data="tableData"
            stripe

            header-row-class-name="back"
            style="width: 100%;text-align: center"
            :row-class-name="tableRowClassName">
            <el-table-column
              label="#">
              <template slot-scope="scope">

                {{tableData[scope.$index].roleName != null ? scope.$index + 1 : ""}}

                <el-button
                  size="mini"
                  type="text"
                  class="font16"
                  v-if="scope.row.roleName == null || scope.row.roleName == undefined "
                  style="color: #32882C"
                >
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名"
            >
            </el-table-column>
            <el-table-column
              prop="admin"
              label="管理员"
            >
            </el-table-column>
            <el-table-column
              prop="data"
              label="创建时间">
            </el-table-column>
            <el-table-column
              prop="jurisdiction"

              label="权限">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作">
              <template slot-scope="scope" v-if="scope.row.roleName != null && scope.row.roleName != undefined ">
                <el-button
                  size="mini"
                  type="text"
                  class="font16"
                  style="color: #32882C"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"

                  style="color: #882C2C;"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-row>
        <el-row class="mt9">
          <span class="font14  " style="color: #999999">共{{totle}}条记录，第{{Page}}/{{Page}}页</span>
        </el-row>
      </el-col>

    </div>

  </div>

</template>

<script>
  export default {
    name: "setaccount",
    methods: {
      addAdmin() {

        this.$router.push({path: this.redirect || "/managementrouter/AccountPassword"}).catch(() => {
        });
      },
        tableRowClassName({row, rowIndex})
        {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        }
      ,

      },
      data() {
        return {
          totle: 3,
          Page: 1,
          tableData: [{
            roleName: '主办方负责人',
            admin: '王小虎',
            jurisdiction: '权限1，权限2，权限3',
            data: "2021.01.01",
          }, {
            roleName: '财务主管',
            admin: '王晓明',
            jurisdiction: '权限1',
            data: "2021.01.01",
          }, {
            roleName: '志愿者管理',
            admin: '王晓明',
            jurisdiction: '权限1，权限3',
            data: "2021.01.01",
          }, {}, {}, {}, {}, {}, {}, {}]
        }
      }
    }
</script>

<style>

  .el-alert__title {
    font-size: 13px;
  }

  #tablescontent .el-table .cell {
    text-align: center !important;
    font-size: 16px;
    color: #666666;
  }

  #tablescontent .el-button {
    font-size: 16px;
  }

  #tablescontent .el-table--striped .el-table__body tr.el-table__row--striped td {

    background: #F5F3F7;

  }

  #tablescontent .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background: #F5F3F7;
  }
</style>

<style scoped>


  .content_table {
    margin-top: 20px;
  }

  .back {
    background-color: #1ab394;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .bodyParent {
    padding-left: 20px;
    width: 100%;
    height: 100%;

  }

  .table-conter {

    padding-left: 64px;
    padding-right: 64px;

  }

  .add_admin_btn {
    height: 35px;
    width: 123px;
    float: right;
  }

  .content-body {
    padding: 26px 32px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .content-body hr {
    margin-top: 22px;
    margin-bottom: 26px;

  }

  .alert-conter {
    width: 837px;
  }
</style>
